<!--
* Date:    2018/9/25.
* Creator: 003.
* File:    登录.
-->
<template>
  <div class="login-main">
    <div class="login-head">
      <img src="../../static/login-title.png" alt="">
    </div>
    <div class="login-box">
      <div class="login-line">
        <span class="icon icon-user"></span>
        <input class="input input-text" type="text" v-model="account" placeholder="请输入账号">
      </div>
      <div class="login-line">
        <span class="icon icon-lock"></span>
        <input class="input input-text" type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="login-line">
        <span class="icon"></span>
        <input  class="input input-checkbox" type="checkbox" v-model="rememberPwd">
        <label for="remember">记住密码</label>
      </div>
      <div class="login-line">
        <span class="icon"></span>
        <button class="input input-btn" type="button" @click="login"> 登录</button>
      </div>
    </div>
  </div>
  <!-- <div class="footer">
    <div class="copyright">
      <p>版权所有：福建新和兴信息技术有限公司&nbsp;&nbsp;地 址：福州市梅峰路6号3层&nbsp;&nbsp;E-Mail：fjxhx@fjxhx.cc</p>
    </div>
  </div> -->
</template>

<script>
  import vMessage from '../components/message'
  import {token} from '../vuex/getter'
  import {setToken, setUser} from '../vuex/action'
  import {apiSource, parseJSON, isSuccess} from '../wohome-api'

  export default {
    data() {
      return {
        // account: 'Admin',
        // password: '12345678'
        account: '',
        password: '',
        rememberPwd: false
      }
    },
    ready() {
      // let password = localStorage.getItem('password')
      // let account = localStorage.getItem('account')
      // if (password) {
      //   this.rememberPwd = true
      //   this.account = account
      //   this.password = password
      // }
      // if (this.token && this.token.userId) {
      //   vMessage.success('已经登入用户, 正在跳转中...')
      //   this.skipIndex()
      // }
    },
    methods: {
      /**
       * 登录方法
       */
      login() {
        apiSource({
          type: 'oauth',
          service: 'adminLogin',
          ct: {loginName: this.account, password: this.password,role:'0'}
        }).then((res) => {
          if (res.userId) {
            if (this.rememberPwd) {
              localStorage.setItem('account', this.account)
              localStorage.setItem('password', this.password)
            } else {
              localStorage.removeItem('account')
              localStorage.removeItem('password')
            }
            this.setToken(res)
            this.skipIndex()
            vMessage.success('登入成功, 正在跳转中...')
          } else {
            vMessage.error('用户名或密码错误')
          }
        }, (res) => {
          console.debug(res.msg)
          vMessage.error('用户名或密码错误!')
        })
      },
      /**
       * 跳转到首页
       */
      skipIndex() {
        setTimeout(() => {
          this.$router.go('/index')          
        }, 1500)
      }
    },
    vuex: {
      getters: {
        token
      },
      actions: {
        setToken, setUser
      }
    }
  }
</script>

<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    background: #fff url("../../static/bg.jpg") 0 bottom no-repeat;
    background-size: cover;
  }

  .login-main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -250px;
  }

  .login-box {
    width: 406px;
    height: 335px;
    padding: 50px 40px 20px;
    background: url("../../static/login-box.png") 0 0 no-repeat;
    border-radius: 5px;
    background-size: 100%;
  }

  .login-head {
    margin-bottom: 5px;
    padding-left: 6px;
    img{
      width: 406px;
    }
  }

  .login-line {
    margin-bottom: 15px;
  }

  .login-line:before, .login-line:after {
    content: " ";
    display: table;
  }

  .icon {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 21px;
    height: 21px;
    margin-right: 15px;
  }

  .icon.icon-user {
    background: url("../../static/icon_user.png") 0 0 no-repeat;
  }

  .icon.icon-lock {
    background: url("../../static/icon_lock.png") 0 0 no-repeat;
  }

  .input.input-text {
    width: 275px;
    height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 3px;
    border: 1px solid #8BD5FF;
  }

  div.checker input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
  }

  div.checker, div.checker span, div.checker input {
    width: 19px;
    height: 19px;
  }

  .input-btn {
    width: 275px;
    height: 30px;
    background-color: #18A2C9;
    border-radius: 4px;
    border: 1px solid #8BD5FF;
    color: #fff;
  }

  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
    color: #004D83;
    font-weight: 400;
  }

  .footer .copyright {
    text-align: center;
  }
</style>
